<template>
  <vxe-layout-container vertical>
    <vxe-layout-header class="layout-header">
      <Query :queryConfig="QueryConfig" @QueryEvent="handleQuery"></Query>
    </vxe-layout-header>
    <vxe-layout-body class="layout-body">
      <div v-if="!CalendarView">
        <vxe-grid ref="maingrid" v-bind="GridOptions" @toolbar-tool-click="handleToolbarToolClick">
          <template #customButtons>
            <vxe-button status='primary' content='批量排程' :size="componentSize" @click="handleBatchScheduling"  
            v-if="btnPromission.scheduling.buttonCaption"/>            
          </template>
          <template #operation="{ row }">
            <vxe-button :size="componentSize" mode="text" status="primary" content="排程" @click="handleScheduling(row)"
              v-if="btnPromission.scheduling.buttonCaption" />
            <vxe-button :size="componentSize" mode="text" status="success" content="审核" @click="handleAudit(row)"
              v-if="btnPromission.audit.buttonCaption && row.pcshzt == 'N'" />
            <vxe-button :size="componentSize" mode="text" status="danger" content="反审" @click="handleAuditCancel(row)"
              v-if="btnPromission.auditcancel.buttonCaption && row.pcshzt == 'Y'" />
          </template>
          <template #auditStatus="{ row }">
            <vxe-tag v-if="row.pcshzt == 'N'" status='error' content="未审核"></vxe-tag>
            <vxe-tag v-else status='success' content="已审核"></vxe-tag>
          </template>
        </vxe-grid>
        <vxe-pager :align="PagerConfig.align" :size="componentSize" :current-page.sync="PagerConfig.currentPage"
          :page-size.sync="PagerConfig.pageSize" :total="PagerConfig.total" @page-change="handlePageChange"></vxe-pager>
      </div>
      <div v-else>
        <vxe-layout-container vertical>
          <vxe-layout-header>
            <vxe-toolbar :tools="[{ code: 'list', icon: 'vxe-icon-menu', circle: true }]"
              @tool-click="handleToolbarListClick"></vxe-toolbar>
          </vxe-layout-header>
          <vxe-layout-container>
              <Calendar :Height="750" :Width="800" :DataCopy="CalendarCopyData" :Data="CalendarData" @CellClick="handleCalendarCellClick" :CurrentMonth="CurrMonth"
              @UpMonthClick="handleUpMonthClick" @CurrMonthClick="handleCurrMonthClick" @NextMonthClick="handleNextMonthClick"></Calendar>
              <vxe-layout-container style="width: 30%;" vertical>
                <vxe-alert status="primary" style="width: 100%;">
                  行程详情
                </vxe-alert>
                <div v-for="item in ProInfo">
                <vxe-row >
                  <vxe-tip status="primary">
                    <label>{{item.khmc}}  {{item.txmc}}  {{item.shlx}}</label>
                  </vxe-tip>
                </vxe-row>
                  <vxe-row v-if="item.shy" style="margin: 10px 20px">
                    审核员：{{item.shy}}
                  </vxe-row>
                  <vxe-row v-if="item.ksrq" style="margin: 10px 20px">
                    审核开始：{{item.ksrq}}
                  </vxe-row>
                  <vxe-row v-if="item.jsrq" style="margin: 10px 20px">
                    审核结束：{{item.jsrq}}
                  </vxe-row>
                  <vxe-row v-if="item.rt" style="margin: 10px 20px">
                    人天：{{ item.rt }}
                  </vxe-row>
                </div>
              </vxe-layout-container>
            <vxe-layout-container vertical>
              <vxe-layout-body>
              </vxe-layout-body>
            </vxe-layout-container>
          </vxe-layout-container>
        </vxe-layout-container>
      </div>
    </vxe-layout-body>
    <vxe-modal v-model="editModal" title="审核排程" :width="1200" :height="680" show-footer>
      <template #default>
        <vxe-card v-for="item in ProcessOptions" style="width: 100%; margin-top: 15px;" shadow>
          <template #title>
            <label>{{ item.lcmc }}</label>
          </template>
          <template #extra>
            <vxe-button :size="componentSize" icon="vxe-icon-add" circle @click="handleCardAdd(item)"></vxe-button>
          </template>
          <el-form :inline="true" v-for="item2 in item.data">
            <el-form-item label="审核员">
              <el-select v-model="item2.shyid" placeholder="请选择审核员">
                <el-option v-for="item3 in ShyOptions" :key="item3.value" :label="item3.label" :value="item3.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="人天">
              <vxe-number-input :size="componentSize" v-model="item2.rt" type="float" step="0.5"></vxe-number-input>
            </el-form-item>
            <el-form-item label="开始时间">
              <vxe-input :size="componentSize" v-model="item2.kssj" placeholder="年-月-日" type="date"
                value-format="yyyy-MM-dd" clearable @change="handleStartDateChange(item2)"></vxe-input>
            </el-form-item>
            <el-form-item label="结束时间">
              <vxe-input :size="componentSize" v-model="item2.jssj" placeholder="年-月-日" type="date"
                value-format="yyyy-MM-dd" clearable></vxe-input>
            </el-form-item>
            <el-form-item >
              <vxe-button  status="error" icon="vxe-icon-delete" circle @click="handleDeleteDetail(item,item2.id)"></vxe-button>
            </el-form-item>
          </el-form>
        </vxe-card>
      </template>
      <template #footer>
        <vxe-button :size="componentSize" status="primary" content="确定" @click="handleEditModalSubmit"></vxe-button>
        <vxe-button :size="componentSize" status="defualt" content="取消" @click="editModal = false"></vxe-button>
        <vxe-button :size="componentSize" status="defualt" content="导入" @click="handleImportScheduling"></vxe-button>
      </template>
    </vxe-modal>
  </vxe-layout-container>

</template>
<style scoped>
</style>
<script>
import ProjectProcess from './index.js';
export default ProjectProcess;
</script>
